<template>
  <div class="story_item--con">
    <div class="story_item--inner">
      <template v-for="(item, index) in danmuArr">
        <Danmu :top="item.top" :isAnimate="item.isAnimate" :key="index">
          <div class="danmu_con">
            <img v-if="index % 3 == 0" :src="img2" alt="" class="danmu_img" />
            <img v-if="index % 3 == 1" :src="img3" alt="" class="danmu_img" />
            <img v-if="index % 3 == 2" :src="img4" alt="" class="danmu_img" />
            <span class="danmu_text">{{ item.text }}！</span>
          </div>
        </Danmu>
      </template>
      <img v-if="index == 0" :src="story1" alt="" class="picture_img" />
      <img v-if="index == 2" :src="story4" alt="" class="picture_img" />
      <img v-if="index == 1" :src="story3" alt="" class="picture_img" />
      <img v-if="index == 3" :src="story2" alt="" class="picture_img" />
    </div>

    <div class="story_content">
      <template v-if="index == 0">
        <div class="text_left mgb_10">
          <span class="tag_color">#浪漫的线路</span>
          这张由日本铁道公司JR推出的“青春18车票”，可以在规定的春天、夏天和冬天的期限里面任意5天，全日本JR的普通车随便坐！售价是11850日元（折合人民币约700+）。
        </div>
        <!-- <br /> -->
        <div class="mgb_10">
          这种“青春18乘车券”每次提前一个月左右可以到较大的JR车站买到，且购买并不限制国籍。
        </div>
        <!-- <br /> -->

        <div class="mgb_10">
          用它可以自由搭乘JR全线的普通车及部分海路航线的任意线路、任意路程，并且可以在途中任意次下车。用来低成本深度游日本，简直是再完美不过了。
        </div>
        <!-- <br /> -->

        <div>
          坐在缓慢行驶的列车上，看遍日本的所有美景，这一刻，好像永远正值18岁，意气风发，满腹情怀。
        </div>
      </template>
      <template v-if="index == 1">
        <!-- <div class="text_left"> -->
        <span class="tag_color">#百年一遇的巧合</span>
        汪汪汪，传说中的单身狗专列么？？
        <!-- </div> -->
      </template>
      <template v-if="index == 2">
        <!-- <div> -->
        <span class="tag_color">#奇葩的站名</span> 载着一车人前往爱河。
        <!-- </div> -->
      </template>
      <template v-if="index == 3">
        <div class="mgb_10">
          <span class="tag_color">#哭笑不得的经历</span>
          一家子从苏州坐车去镇江，安排好行李落座后，上来一个大哥，拿着票很客气的对我们说：你看我的票，是2车1座F吧。又指着我们的位子说：看这里也是1座吧。
        </div>

        <div class="">
          大家懵逼，怎么滴，12306一个位子还卖给两个人？！
        </div>

        <div class="">
          拿过两张票一对比，车次一样、位子一样。再一看，尼玛！
        </div>

        <div class="">
          大哥你知道今天是21号吧，你的票是22号的呦！
        </div>

        <div>
          大哥一声：我X ！就下车了
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import Danmu from "../danmu";
import { img2, img3, img4, story1, story2, story3, story4 } from "@/constant";

const awaitTime = timeout => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(true);
    }, timeout);
  });
};
let timer = null;
// let timer2 = null;
// let i = 0;

export default {
  components: {
    Danmu
  },
  props: {
    danmuArr: [],
    index: {
      type: Number
    }
  },
  data: function() {
    return {
      img2,
      img3,
      img4,
      story1,
      story2,
      story3,
      story4,

      ani1: false,
      ani2: false,
      ani3: false
    };
  },
  methods: {
    async aniFunc() {
      for (let i = 0; i < this.danmuArr.length; i++) {
        this.danmuArr[i].isAnimate = true;
        if (i !== this.danmuArr.length - 1) await awaitTime(2500);
      }
      await awaitTime(12000);
      this.danmuArr.forEach(item => (item.isAnimate = false));
    }
  },
  async mounted() {
    this.aniFunc();
    timer = setInterval(async () => {
      this.aniFunc();
    }, 2500 * (this.danmuArr.length - 1) + 12000);
  },
  destroyed() {
    timer && clearInterval(timer);
    // timer2 && clearInterval(timer2);
  }
};
</script>

<style lang="scss" scoped>
@import "@/app.scss";

.story_item--con {
  min-height: 366px;
  padding: 0 38px 30px 38px;
  background: #fff;
  border-radius: 20px;
  line-height: 36px;
  margin-top: 48px;
  @include flex_config(center, flex-start, column);

  .story_item--inner {
    width: 100%;
    min-height: 280px;
    margin: 38px 0;
    background: #e2e2e2;
    border-radius: 20px;
    position: relative;
    overflow: hidden;

    .danmu_con {
      @include flex_config(center, center, row);
      background-color: rgba(244, 244, 254, 1);
      height: 60px;
      border-radius: 15px;

      .danmu_img {
        // width: 50px;
        height: 55px;
        margin-left: 10px;
      }

      .danmu_text {
        font-size: 28px;
        font-weight: bold;
        color: #37393e;
        margin-left: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        // width: 300px;
      }
    }

    .picture_img {
      width: 100%;
    }
  }

  .story_content {
    font-size: 24px;
    font-weight: bold;
    color: #363636;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
  }
}

.font_bold {
  font-weight: 600;
}

.text_left {
  text-align: left;
}

.mgb_10 {
  margin-bottom: 10px;
}

.tag_color {
  color: #ff4e1e;
}
</style>
